<template>
	<view class="page group-member">
		<nav-bar back>群成员<button v-if="form==='groupManagement'" class="confirm"
				@click="$refs.popup.open()">确认</button></nav-bar>
		<view class="nav-bar">
			<view class="nav-search">
				<uni-search-bar v-model="searchText" radius="5" cancelButton="none" placeholder="输入昵称搜索"></uni-search-bar>
			</view>
		</view>
		<view v-if="form==='inviters'" class="member-items">
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<view v-for="(member, idx) in groupMembers" v-show="!searchText || member.showNickName.includes(searchText)"
					:key="idx">
					<view class="member-item" @click="onShowUserInfo(member.userId)">
						<head-image :name="member.inviteesName" :online="member.online" :url="member.headImage"></head-image>
						<view class="approval-text">{{member.inviterName}}邀请{{ member.inviteesName }}加入群聊</view>
						<view class="member-kick" v-if="member.inviterStatus==='0'">
							<button type="primary" v-show="isOwner && !isSelf(member.userId)" size="mini"
								@click.stop="onInviters(member, idx,'1')"
								style="padding: 0rpx 20rpx;line-height: 50rpx;">同意</button>&nbsp;
							<button type="warn" v-show="isOwner && !isSelf(member.userId)" size="mini"
								@click.stop="onInviters(member, idx,'2')" style="padding: 0rpx 20rpx;line-height: 50rpx;">拒绝</button>
						</view>
						<view class="member-kick" v-if="member.inviterStatus!=='0'">
							<text style="color: #ccc;">{{ member.inviterStatus==='1'?'已同意':'已拒绝'}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="form!=='inviters'" class="member-items">
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<radio-group>
					<view v-for="(member, idx) in groupMembers" v-show="!searchText || member.showNickName.includes(searchText)"
						:key="idx">
						<view class="member-item" @click="onShowUserInfo(member)"
							v-if="!isOwnerUser(member.userId)&&!isSelf(member.userId)">
							<radio v-if="form==='groupManagement'" :checked="selected.userId===member.userId" color="#07c25f"
								style="transform:scale(0.8)" />
							<head-image :name="member.showNickName" :online="member.online" :url="member.headImage" size="small"></head-image>
							<view class="member-name">{{ member.showNickName }}
								<uni-tag v-if="member.userId == group.ownerId" text="群主" size="small" circle type="error">
								</uni-tag>
								<uni-tag v-if="member.isAdmin === '1'" text="管理员" size="small" circle type="primary"></uni-tag>
								<uni-tag v-if="member.userId == userStore.userInfo.id" text="我" size="small" circle></uni-tag>
							</view>
							<!-- <view v-if="form==='showAllMmeber'" class="member-kick">
								<button type="warn" plain v-show="!isSelf(member.userId) && group.ownerId!==member.userId" size="mini"
									@click.stop="onKickOut(member, idx)">移出群聊</button>
							</view>
							<view v-if="form==='groupManagement'" class="member-kick">
								<button type="warn" plain v-show="!isSelf(member.userId) && group.ownerId!==member.userId" size="mini"
									@click.stop="onGroupManagement(member, idx)">转让群主</button>
							</view> -->
							<view v-if="form==='noSpeaking'" class="member-kick" style="position: relative;">
								<text style="color: #ccc;font-size: 10px;"
									v-show="new Date(member.silenceDate)-new Date()>0">禁言剩余{{Math.ceil((new Date(member.silenceDate)-new Date())/1000/60)}}分钟</text>
								<uni-data-picker style="width: 90px;" v-if="!isSelf(member.userId) && group.ownerId!==member.userId"
									placeholder="禁言" :localdata="timeData" @change="(e)=>onNoSpeaking(member, idx,e)"
									@popupopened="onpopupopened">
								</uni-data-picker>
							</view>
							<view v-if="form==='blacklist'" class="member-kick">
								<button type="warn" plain v-if="!isSelf(member.userId) && group.ownerId!==member.userId" size="mini"
									@click.stop="onBlacklist(member, idx)">{{member.isBlacklist==="1"?"移出黑名单":"加入黑名单"}}</button>
							</view>
							<view v-if="form==='administrators'" class="member-kick">
								<button :type="member.isAdmin==='1'?'warn':'primary'"
									v-if="!isSelf(member.userId) && group.ownerId!==member.userId" size="mini"
									@click.stop="onAdministrators(member, idx)">{{member.isAdmin==="1"?"移出管理员":"添加管理员"}}</button>
							</view>
						</view>
					</view>
				</radio-group>
			</scroll-view>
		</view>
		<popup-modal ref="popup" title="确认转让" @confirm="confirm()">确定将成员'{{selected.showNickName}}'转为群主吗？</popup-modal>
	</view>
</template>

<script>
	import form from '../../uni_modules/uview-plus/libs/config/props/form';

	export default {
		data() {
			return {
				isModify: false,
				searchText: "",
				group: {},
				groupMembers: [],
				form: "",
				timeData: [{
						text: "禁言30分钟",
						value: 30,
					},
					{
						text: "禁言1小时",
						value: 60
					},
					{
						text: "禁言1天",
						value: 60 * 24
					},
					{
						text: "禁言1周",
						value: 60 * 24 * 7
					},
					{
						text: "不禁言",
						value: 0
					},
				],
				selected: '',
			}
		},
		methods: {
			onShowUserInfo(member) {
				this.selected = member
				if (this.form !== 'showAllMmeber') return
				uni.navigateTo({
					url: "/pages/common/user-info?id=" + member.userId
				})
			},
			onKickOut(member, idx) {
				uni.showModal({
					title: '确认移出?',
					content: `确定将成员'${member.showNickName}'移出群聊吗？`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/kick/${this.group.id}?userId=${member.userId}`,
							method: 'DELETE'
						}).then(() => {
							uni.showToast({
								title: `已将${member.showNickName}移出群聊`,
								icon: 'none'
							})
							this.groupMembers.splice(idx, 1);
							this.isModify = true;
						});
					}
				})
			},
			confirm(member) {
				this.$http({
					url: `/group/update`,
					method: 'PUT',
					data: {
						"id": this.group.id,
						"name": this.group.name,
						"ownerId": this.selected.userId
					}
				}).then(() => {
					uni.showToast({
						title: `已将${this.selected.showNickName}转为群主`,
						icon: 'none'
					})
					this.loadGroupInfo(this.group.id)
					this.isModify = true;
				});
			},
			onNoSpeaking(member, idx, e) {
				// uni.showModal({
				// 	title: '确认禁言?',
				// 	content: `确定将成员'${member.showNickName}'${e.detail.value[0].text}吗？`,
				// 	success: (res) => {
				// 		if (res.cancel)
				// 			return;
				this.$http({
					url: `/groupMember/updateSilenceDate`,
					method: 'PUT',
					data: {
						"groupId": this.group.id,
						"userId": member.userId,
						"silence": e.detail.value[0].value
					}
				}).then(() => {
					uni.showToast({
						title: `已将${member.showNickName}禁言`,
						icon: 'none'
					})
					this.loadGroupMembers(this.group.id)
					this.isModify = true;
				});
				// 	}
				// })
			},
			onInviters(member, idx, value) {
				const type = value === '1' ? '同意' : '拒绝'
				console.log(member)
				this.$http({
					url: `/groupInviter/updateGroupInviter`,
					method: 'POST',
					data: {
						"id": member.id,
						"inviterId": member.inviterId,
						"inviteesId": member.inviteesId,
						"inviterGroupId": this.group.id,
						"inviterStatus": value
					}
				}).then(() => {
					uni.showToast({
						title: `已${type}${member.showNickName}的申请`,
						icon: 'none'
					})
					this.groupInviter(this.group.id)
					this.isModify = true;
				});
			},
			// 黑名单
			onBlacklist(member, idx) {
				const type = member.isBlacklist === "1" ? "移出黑名单" : "加入黑名单"
				uni.showModal({
					title: `确认${type}?`,
					content: `确定将成员'${member.showNickName}'${type}吗？`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/groupMember/updateMemberBlack`,
							method: 'PUT',
							data: {
								"groupId": this.group.id,
								"userId": member.userId,
								"isBlacklist": member.isBlacklist === "1" ? "0" : "1"
							}
						}).then(() => {
							uni.showToast({
								title: `已将${member.showNickName}${type}`,
								icon: 'none'
							})
							this.loadGroupMembers(this.group.id)
							this.isModify = true;
						});
					}
				})
			},
			// 管理员
			onAdministrators(member, idx) {
				const type = member.isAdmin === "1" ? "移出管理员" : "添加为管理员"
				// uni.showModal({
				// 	title: `确认${type}?`,
				// 	content: `确定将成员'${member.showNickName}'${type}吗？`,
				// 	success: (res) => {
				// 		if (res.cancel)
				// 			return;
				this.$http({
					url: `/groupMember/updateMemberRole`,
					method: 'PUT',
					data: {
						"groupId": this.group.id,
						"userId": member.userId,
						"isAdmin": member.isAdmin === "1" ? "0" : "1"
					}
				}).then(() => {
					uni.showToast({
						title: `已将${member.showNickName}${type}`,
						icon: 'none'
					})
					this.loadGroupMembers(this.group.id)
					this.isModify = true;
				});
				// 	}
				// })
			},
			loadGroupInfo(id) {
				this.$http({
					url: `/group/find/${id}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
				});
			},
			loadGroupMembers(id) {
				this.$http({
					url: `/group/members/${id}`,
					method: "GET"
				}).then((members) => {
					console.log(members);
					this.groupMembers = members.filter(m => !m.quit);
					// 黑名单
					// if (this.form === 'blacklist') {
					// 	this.groupMembers = this.groupMembers.filter(v => v.isBlacklist === "1");
					// 	return
					// =
				})
			},
			// 获取群聊邀请人列表
			groupInviter(id) {
				this.$http({
					url: `/groupInviter/selectGroupInviter/${id}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					console.log('邀请人列表', this.groupMembers)
				})
			},
			isSelf(userId) {
				return userId == this.userStore.userInfo.id
			},
			isOwnerUser(userId) {
				return userId == this.group.ownerId;
			}
		},
		computed: {
			isOwner() {
				console.log('用户信息', this.userStore.userInfo)
				return this.userStore.userInfo.id == this.group.ownerId;
			}
		},
		onLoad(options) {
			console.log(options)
			this.form = options.form
			this.loadGroupInfo(options.id);
			if (this.form === 'inviters') {
				this.groupInviter(options.id);
				return
			}
			this.loadGroupMembers(options.id);
		},
		onUnload() {
			if (this.isModify) {
				// 刷新页面
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.loadGroupMembers();
			}
		}
	}
</script>

<style scoped lang="scss">
	.group-member {
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.title {
			button {
				position: absolute;
				color: #fff;
				background-color: #07c160;
				right: 20rpx;
				bottom: 0rpx;
				padding: 0;
				font-size: 30rpx !important;
				width: 80rpx;
				line-height: 60rpx;
			}
		}

		.member-items {
			position: relative;
			flex: 1;
			overflow: hidden;

			.member-item {
				height: 120rpx;
				display: flex;
				border-bottom: 1rpx solid #f7f7f7;
				position: relative;
				padding: 0 30rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				.approval-text {
					font-size: 28rpx;
					flex: 1;
					padding: 0 30rpx;
					white-space: wrap;
				}

				.member-name {
					display: flex;
					align-items: center;
					flex: 1;
					padding-left: 20rpx;
					font-size: $im-font-size;
					line-height: $im-font-size * 2;
					white-space: nowrap;
					overflow: hidden;

					.uni-tag {
						margin-left: 5rpx;
						width: 40rpx;
						border: 0;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 20rpx;
						text-align: center;
					}
				}
			}

			.scroll-bar {
				height: 100%;
			}
		}
	}
</style>